<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" icon="plus" @click="handleAddBanner">添加轮播图 </a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        bordered
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        :showPagination="false"
      >
        <span slot="image" slot-scope="text, record">
          <img
            @click="preview(record)"
            :src="text"
            style="height: 50px; border: 4px solid #e5e5e5; border-radius: 5px"
          />
        </span>
        <span slot="action" slot-scope="text, record">
          <a-popconfirm
            style="margin: 0 8px 8px 0"
            placement="top"
            ok-text="确定"
            cancel-text="点错了"
            @confirm="deleSwiperRequ(record)"
          >
            <template slot="title">
              <p>您确定要删除此轮播？</p>
            </template>
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </span>
      </s-table>
    </a-card>
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
    <AddBannerForm :visible="addBannerVisible" @ok="addBannerOk()" @cancel="addBannerCancel()"></AddBannerForm>
  </page-header-wrapper>
</template>

<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (error) => reject(error)
  })
}
import { STable, Ellipsis } from '@/components'

import AddBannerForm from './modules/AddBannerForm.vue'

import { GetBannerList,DeleteBanner } from '@/api/system'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '内容',
    dataIndex: 'image',
    scopedSlots: {
      customRender: 'image',
    },
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: {
      customRender: 'action',
    },
  },
]

export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    AddBannerForm,
  },
  data() {
    this.columns = columns
    this.formLayout = {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 24,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 24,
        },
      },
    }
    return {
      previewVisible: false,
      previewImage: '',
      addBannerVisible: false,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        parameter.page = parameter.pageNo
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return GetBannerList(requestParameters).then((res) => {
          return {
            data: res.data,
            pageNo: 1,
            pageSize: 10000,
          }
        })
      },
    }
  },
  methods: {
    handleAddBanner() {
      this.addBannerVisible = true
    },
    addBannerOk() {
      this.$refs.table.refresh()
      this.addBannerVisible = false
    },
    addBannerCancel() {
      this.addBannerVisible = false
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    preview(record) {
      this.previewImage = record.image
      this.previewVisible = true
    },
    handleChange({ fileList }) {
      this.fileList = fileList
      console.log(this.fileList)
    },
    deleSwiperRequ(record) {
      var that = this
      DeleteBanner({
        id: record.id,
      }).then(function (res) {
        if (res.code == 0) {
          that.$message.info('删除成功')
          that.$refs.table.refresh()
        }
      })
    },
  },
}
</script>

<style>
#addBannersModal .ant-form-item-label {
  text-align: left;
}
</style>
